<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script>
      const ROOM_ID = "<%= roomId %>"
   </script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <script defer src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="/socket.io/socket.io.js" defer></script>
   <link rel="stylesheet" href="style.css">
   <script src="https://kit.fontawesome.com/c939d0e917.js"></script>
   <script src="script.js" defer></script>
   <style>
      #video-grid{
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
      }
      video{
         height: 300px;
         width: 400px;
         object-fit: cover;
         padding: 8px;
      }
   </style>
</head>
<body>
   <div class="main">
      <div class="main__left">
         <div class="main__videos">
            <div id="video-grid">
      
            </div>
         </div>
         <div class="main__controls">
            <div class="main__controls__block">
               <div onclick="muteUnmute()" class="main__controls__button main__mute_button">
                  <i class="fas fa-microphone"></i>
                  <span>Mute</span>
               </div>
               <div onclick="playStop()" class="main__controls__button main__video_button" >
                  <i class="fas fa-video"></i>
                  <span>Stop Video</span>
               </div>
            </div>
            <div class="main__controls__block">
               <div class="main__controls__button">
                  <i class="fas fa-shield-alt"></i>
                  <span>Security</span>
               </div>
               <div class="main__controls__button">
                  <i class="fas fa-user-friends"></i>
                  <span>Participants</span>
               </div>
               <div class="main__controls__button">
                  <i class="fas fa-comment-alt"></i>
                  <span>Chat</span>
               </div>
            </div>
            <div class="main__controls__block">
               <div class="main__controls__button">
                  <span class="leave_meeting">Leave Meeting</span>
               </div>
            </div>
         </div>
      </div>
      <div class="main__right">
         <div class="main__header">
            <h6>Chat</h6>
         </div>
         <div class="main__chat_window">
            <ul class="messages">
               
            </ul>

         </div>
         <div class="main__message_container">
            <input id="chat_message" type="text" placeholder="Type message here...">
         </div>
      </div>
   </div>
</body>
</html>
